<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./d3.min.js"></script>
    <script src="./d3-sankey.js"></script>
    <style>
        #svgBody {
            width: 1600px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div id="svgBody">
        <svg>

        </svg>
    </div>
    <script>

        let color = d3.scaleOrdinal(d3.schemeCategory10)
        const width = document.getElementById("svgBody").clientWidth
        const height = document.getElementById("svgBody").clientHeight
        let chart = d3.select("#svgBody").select("svg")
        chart.attr("width",width)
        chart.attr("height",height)
        d3.json("./test.json").then(data=>{
            const sankey = d3.sankey()
                        .nodeWidth(5)
                        .nodePadding(5)
                        .size([width,height])
                        .nodeId(d=>d.id)
                        .linkSort((d1,d2)=>{
                            //console.log(d1,d2)
                            if(d1.index<d2.index) {
                                return -1
                            } else {
                                return 1
                            }
                        })
                        .nodeSort((d1,d2)=>{
                            if(d1.index<d2.index) {
                                return -1
                            } else {
                                return 1
                            }
                        })
        let {nodes, links} = sankey({
                                    nodes: data.nodes,
                                    links: data.links
        });
        let pian = 100
        for(let i = 0; i < nodes.length; ++i) {
            let val = nodes[i]
            if(val.depth == 4 || val.depth == 5) {
                val.y0+=pian
                val.y1+=pian
            }
        }
        
        for(let i = 0; i < links.length; ++i) {
            let val = links[i]
            if(val.target.depth == 4 || val.target.depth == 5) {
                val.y1+=pian
            }
            if(val.source.depth== 4) {
                val.y0+=pian
            }
        }
        console.log(nodes)
        console.log(links)
        drawRect(chart,nodes)
        drawlines(chart,links)
        function drawRect(chart,nodes){
            const rects = chart.append('g')
                                    .attr('class', 'rects')
                                    .selectAll('.node')
                                    .data(nodes);

            rects.enter()
                    .append('g')
                    .attr('class', 'node')
                    .attr('index', (d)=> d.id)
                    .attr('linkNodes', (d)=> {
                        const nextNodes = d.sourceLinks.map((link) => link.target.id).join('');
                        const prevNodes = d.targetLinks.map((link) => link.source.id).join('');
                        return nextNodes + d.id + prevNodes;
                    })
                    .append('rect')
                .merge(rects)
                    .attr('x', (d) => d.x0)
                    .attr('y', (d) => d.y0)
                    .attr('width', (d) => d.x1 - d.x0)
                    .attr('height', (d) => d.y1 - d.y0)
                    .attr('fill', "black");

                    rects.exit()
                            .remove();

            }
           
    function drawlines(chart,links){
        lines = chart.append('g')
            .attr('class', 'lines')
            .selectAll('path')
            .data(links);

               lines.enter()
                      .append('path')
                    .merge(lines)
                      .attr('linkNodes', (d) => d.source.id + '-' + d.target.id)
                      .attr('d', d3.sankeyLinkHorizontal())
                      .attr('stroke', d=>color(d.type))
                      .attr('stroke-width', (d) => d.width)
                      .attr('stroke-opacity', '0.4')
                      .attr('fill', 'none');

               lines.exit()
                      .remove();
    }


        })
                    
    </script>
</body>
</html>